<template>
  <view class="index">
    <view class="i-banner">
      <swiper class="b-swiper" indicator-dots :autoplay="true" indicator-active-color="#dc117d">
        <swiper-item v-for="(item,i) in maBanner" :key="i">
          <view class="s-item">
            <image :src="item.imgUrl" @tap="navBanner(item)" />
          </view>
        </swiper-item>
      </swiper>
    </view>

    <view class="i-main box-gap">
      <i-block class="i-latest" title="新款首发" @click-more="developing">
        <scroll-view scroll-x>
          <view class="goods-wrap">
            <a-goods-card v-for="(g,i) in pageInfo.latest" :key="i" :goods="g"></a-goods-card>
          </view>
        </scroll-view>
      </i-block>

      <i-block class="i-hot" title="爆款推荐" @click-more="developing">
        <view class="pull-goods-wrap">
          <a-goods-card v-for="(g,i) in pageInfo.latest" :key="i" type="row" :goods="g"></a-goods-card>
        </view>
      </i-block>
      <a-logo type="text"></a-logo>
    </view>

    <upgrading-tip
      v-if="update.isWillUpdate || update.isShowUpdateLog"
      :mode="update.isWillUpdate ? 1 : 2"
    ></upgrading-tip>
  </view>
</template>

<script>
import {
  mapState
} from 'vuex';
import IBlock from './i-block';
import upgradingTip from '@/components/upgrading-tip';
import {
  model
} from '@/model';

const {
  PageBo
} = model.collection;

export default {
  name: 'Index',
  components: {
    IBlock,
    upgradingTip
  },
  data () {
    return {
      pageInfo: {
        latest: [],
        activity: []
      },
      maBanner: []
    }
  },
  onShow () {
    this.init();
  },
  onLoad (params) {
    const { redType, id, inviteCode } = params;
    switch (redType) {
      case 'invite':
        this.nav('/pages/register/index?inviteCode=' + inviteCode);
        break;
      case 'axqVideo':
        this.nav(`/subpackage/axq/pages/video/_id?id=${id}`);
        break;
      case 'liveRecord':
        this.nav(`/subpackage/live/pages/record/_id?id=${id}`);
        break;
      case 'liveRoom':
        this.nav(`/subpackage/live/pages/room/_id?id=${id}`);
        break;
      default:
        break;
    }
  },
  onShareAppMessage () {
    return {
      title: '傲雪棋首页分享',
      path: '/pages/index/index'
    }
  },
  onShareTimeline () {
    return {
      title: '傲雪棋首页分享',
      path: '/pages/index/index'
    }
  },
  computed: {
    ...mapState(['isLogin']),
    ...mapState('user', ['info']),
    ...mapState('sys', ['update'])
  },
  methods: {
    init () {
      PageBo.sendApi('info', {
        params: {
          page: 'pageIndex'
        },
        data: {}
      }).then(res => {
        const {
          status,
          data
        } = res;
        if (status) {
          this.pageInfo.latest = data.floor[0].goods.map((g) => {
            return g
          })
          this.maBanner = data.maBanner
        }
      });
    },
    navBanner (o) {
      if (o.type === 1) {
        this.nav(`/subpackage/goods/pages/detail/index?id=${o.goodsId}`)
      } else if (o.type === 2) {
        this.nav(o.url)
      } else {
        this.nav(`/pages/h5/index?url=${o.url}&title=${o.title}`)
      }
    }
  }
}
</script>

<style lang="less">
/deep/ .index {
  position: relative;
  min-height: 100vh;
  background: #f7f7f7;

  .i-banner {
    .b-swiper {
      height: 400rpx;
    }

    image {
      width: 100%;
      height: 400rpx;
    }
  }

  .i-purse {
    height: 100rpx;
    padding: 0 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #333333;
    font-size: 31rpx;
    font-weight: 600;
    background-color: #fff;

    .i-left {
      display: flex;
      align-items: center;

      .purse {
        font-size: 52rpx;
        color: #dc117d;
        margin-right: 20rpx;
      }
    }
  }

  .i-main {
    transform: translateY(-30rpx);
    box-sizing: border-box;
  }

  .i-block {
    margin-top: 24rpx;
  }

  .i-promote {
    .promote-video-wrap {
      height: 300rpx;
      width: 100%;

      .promote-video {
        width: 100%;
        height: 100%;
        border-radius: 20rpx;
      }
    }
  }

  .i-latest {
    .goods-wrap {
      .flexLayout();

      a-goods-card {
        &:not(:first-of-type) {
          margin-left: 20rpx;
        }
      }
    }
  }

  .i-hot {
    .pull-goods-wrap {
      a-goods-card {
        .goods-card-cover {
          image {
            width: 260rpx;
            height: 260rpx;
            border-radius: 15rpx;
          }
        }

        &:not(:first-of-type) {
          .goods-card {
            margin-top: 20rpx;
          }
        }
      }
    }
  }
}
</style>